<!-- 宠物模块入口的基本模板 -->
<template>
  <div class="slider-item">
  <div class="pet-show-slot">
    <div class="dog-img">
      <img src="~assets/img/profile/dog_header.jpg" alt="" />
      <div>
        <img src="~assets/img/profile/dog_hand_left.png" alt="" />
        <img src="~assets/img/profile/dog_hand_right.png" alt="" />
      </div>
    </div>
    <div class="user-pet-info">
      <div class="pet-add" @click="toPetAddPage" v-if="!hasPet">
        <img src="~assets/img/profile/addIcon.svg" alt="" />
        <span>添加我的宠物</span>
      </div>
      <div class="petShow" v-else @click="petInfoPage">
        <img class="update-icon" src="~assets/img/profile/update.svg" />
        <div class="title-box">
          <div class="photo-box">
            <img src="~assets/img/profile/dog2.jpg" />
          </div>
          <div class="pet-age">1岁</div>
        </div>
        <div class="name-box">
          <h3>Liqi</h3>
          <img class="pet-gender" src="~assets/img/profile/nan.svg" />
        </div>
        <div class="desc-box">主人还没给我添加备注~</div>
      </div>
    </div>
  </div>

  <pet-add
    v-show="petAddPage"
    @petAddOut="petAddOut"
    @petDate="petDate"
  ></pet-add>
  </div>
  
</template>

<script>
import PetAdd from "./PetAdd.vue";

export default {
  name: "PetShowSlot",
  components: {
    PetAdd,
  },
  data() {
    return {
      hasPet: false,
      petAddPage: false,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    toPetAddPage() {
      this.petAddPage = !this.petAddPage;
    },
    petAddOut() {
      this.petAddPage = !this.petAddPage;
    },
    petDate() {
      this.petAddPage = !this.petAddPage;
      this.hasPet = !this.hasPet;
    },
    petInfoPage(){
      this.$emit("petInfoPage")
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
.pet-show-slot {
  margin: 10px 50px;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}
.dog-img {
  width: 100%;
}
.dog-img > img:first-child {
  width: 110px;
}
.dog-img div {
  position: absolute;
  top: 68px;
  width: 100%;
}
.dog-img div img {
  position: absolute;
  width: 25px;
}
.dog-img div img:first-child {
  left: 60px;
}
.dog-img div img:last-child {
  right: 60px;
}

.user-pet-info {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 4px rgba(100, 100, 100, 0.2);
  padding: 20px;
}
.pet-add {
  margin: 30px 0;
}
.pet-add img {
  width: 25px;
}
.pet-add span {
  font-size: 17px;
  font-weight: bold;
  color: #ccc;
  margin-left: 10px;
}
.petShow {
  position: relative;
}
.update-icon {
  width: 18px;
  position: absolute;
  right: 0;
}
.title-box{
  position: relative;
  margin: 0 auto;
}
.photo-box {
  width: 85px;
  height: 85px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  text-align: center;
}
.photo-box img {
  width: 100%;
}
.pet-age {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 11px;
  border-radius: 8px;
  font-size: 12px;
  background-color: #ffefdd;
  color: #ff8b12;
}
.name-box{
  margin: 30px 0 20px;
}
.name-box h3{
  display: inline-block;
  margin-right: 15px;
}
.name-box img{
  width: 20px;
}
.desc-box{
  color: rgb(163, 162, 162);
  font-size: 14px;
}
</style>